<template>

    <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="节点信息" name="first">
                <el-card class="box-card"
                    style="background-color:whitesmoke;border: 1px solid cadetblue;height: 730px;width: 900px;">
                    <table>
                        <tbody>
                            <tr>
                                <td style="width: 130px;">节点名称</td>
                                <td style="width: 130px;">节点类型</td>
                                <td style="width: 130px;">节点操作者</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <td style="width: 130px;">处理时间</td>

                            </tr>
                        </tbody>
                    </table>
                    <el-form :model="form" label-width="auto" style="max-width: 500px">
                        <el-row :gutter="25">
                            <el-col :span="5" :offset="0">
                                <br />
                                <div v-text="form.nodeNameObj.value1"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value2"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value3"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value4"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value5"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value6"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value7"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeNameObj.value8"></div>
                            </el-col>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <el-col :span="5" :offset="0">
                                <br />
                                <div v-text="form.nodeTypeObj.value1"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value2"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value3"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value4"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value5"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value6"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value7"></div>
                                <br />
                                <br />
                                <div v-text="form.nodeTypeObj.value8"></div>
                            </el-col>
                            <el-col :span="5" :offset="0">
                                <div>
                                    <br />
                                    <el-input v-model="form.nodeOperator1" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(1)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator2" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(2)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator3" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(3)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator4" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(4)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator5" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(5)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator6" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(6)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator7" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(7)" />
                                </div>
                                <br />
                                <div>
                                    <el-input v-model="form.nodeOperator8" style="width: 120px" placeholder="设置"
                                        @click="openDialogV(8)" />
                                </div>

                            </el-col>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-col :span="5" :offset="0">
                                <br />
                                <div style="width: 200px;">
                                    <div style="float: left;">

                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime1" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>

                                    </div>
                                    <div style="float: right;">

                                        <el-form-item>
                                            <el-input v-model="form.numberDays1" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime2" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays2" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime3" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays3" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime4" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays4" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime5" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays5" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime6" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays6" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime7" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays7" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div style="width: 200px;">
                                    <div style="float: left;">
                                        <el-form-item prop="processingTime">
                                            <el-select v-model="form.processingTime8" placeholder="选择处理时间"
                                                style="width: 90px;">
                                                <el-option v-for="(value, index) in options" :key="index"
                                                    :label="value.text" :value="value.value" />
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div style="float: right;">
                                        <el-form-item>
                                            <el-input v-model="form.numberDays8" style="width:80px;" />
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <br />
                        <br />
                        <el-form-item style="float:right;">
                            <el-button type="primary" @click="onSubmit">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-tab-pane>


            <el-dialog v-model="dialogVisible" title="设置节点操作者" width="900">
                <span>
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-radio-group v-model="radio1" class="ml-4">
                            <el-radio value="1" size="large">指定部门</el-radio>
                            <el-radio value="2" size="large">指定角色</el-radio>
                          
                        </el-radio-group>
                        <el-transfer v-model="selectedItems" :data="data" :props="props" v-show="radio1 == 1" />
                        <el-transfer v-model="selectedItems2" :data="datas" :props="props2" v-show="radio1 == 2" />

                        <el-button type="primary" @click="save">确定</el-button>
                    </el-form>
                </span>
            </el-dialog>


        

        </el-tabs>
    </div>

</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//给设置按钮赋值
const save = () => {
    dialogVisible.value = false

    if (radio1.value == 1) {
        if (flag1.value == 1) {
            form.nodeOperator1 = selectedItems.value.join(',');
        }
        else if (flag1.value == 2) {
            form.nodeOperator2 = selectedItems.value.join(',')
        }
        else if (flag1.value == 3) {
            form.nodeOperator3 = selectedItems.value.join(',')
        }
        else if (flag1.value == 4) {
            form.nodeOperator4 = selectedItems.value.join(',')
        }
        else if (flag1.value == 5) {
            form.nodeOperator5 = selectedItems.value.join(',')
        }
        else if (flag1.value == 6) {
            form.nodeOperator6 = selectedItems.value.join(',')
        }
        else if (flag1.value == 7) {
            form.nodeOperator7 = selectedItems.value.join(',')
        }
        else if (flag1.value == 8) {
            form.nodeOperator8 = selectedItems.value.join(',')
        }
    }
    else if (radio1.value == 2) {
        if (flag1.value == 1) {
            form.nodeOperator1 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 2) {
            form.nodeOperator2 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 3) {
            form.nodeOperator3 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 4) {
            form.nodeOperator4 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 5) {
            form.nodeOperator5 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 6) {
            form.nodeOperator6 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 7) {
            form.nodeOperator7 = selectedItems2.value.join(',')
        }
        else if (flag1.value == 8) {
            form.nodeOperator8 = selectedItems2.value.join(',')
        }

    }
}
interface IOption {
    text: string
    value: string
}
// 从后端获取动态的 options 数组
const options = ref<IOption[]>([]);
//关于弹出框
const dialogVisible = ref(false)

//单选钮
const radio1 = ref(1)
//部门
const data = ([
    { key: "部门一", label: '部门一', disabled: false },
    { key: "部门二", label: '部门二', disabled: false },
    { key: "部门三", label: '部门三', disabled: false },
    { key: "部门四", label: '部门四', disabled: false },
    { key: "部门五", label: '部门五', disabled: false },
    { key: "部门六", label: '部门六', disabled: false },
])
const selectedItems = ref<number[]>([])
const props = ref({
    key: 'key',
    label: 'label'
})
//角色
const datas = ([
    { key: "角色一", label: '角色一', disabled: false },
    { key: "角色二", label: '角色二', disabled: false },
    { key: "角色三", label: '角色三', disabled: false },
    { key: "角色四", label: '角色四', disabled: false },
    { key: "角色五", label: '角色五', disabled: false },
    { key: "角色六", label: '角色六', disabled: false },
])
const selectedItems2 = ref<number[]>([])
const props2 = ref({
    key: 'key',
    label: 'label'
})
const nodeName = reactive({
    value1: '节点一',
    value2: '节点二',
    value3: '节点三',
    value4: '节点四',
    value5: '节点五',
    value6: '节点六',
    value7: '节点七',
    value8: '节点八',
});
const nodeType = reactive({
    value1: '上报',
    value2: '受理',
    value3: '立案',
    value4: '派遣',
    value5: '处置',
    value6: '核实',
    value7: '核查',
    value8: '归档',
});

const flag1 = ref(0);
const openDialogV = (flag: number) => {
    selectedItems.value = []
    selectedItems2.value = []
    dialogVisible.value = true;
    flag1.value = flag
}

const handleCheckedChange = (value: number[]) => {
    console.log(value)
}

// 绑定处理时间下拉框
const fetchOptions = async () => {
    try {
        const response = await axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/GetOptions');
        // 将后端返回的选项数据保存到 options 中
        options.value = response.data;
    } catch (error) {
        console.error('获取下拉框选项失败:', error);
    }
};

const form = reactive({
    nodeName: '',
    nodeNameObj: nodeName,
    nodeType: '',
    nodeTypeObj: nodeType,
    nodeOperator: '',
    nodeOperator1: '',
    nodeOperator2: '',
    nodeOperator3: '',
    nodeOperator4: '',
    nodeOperator5: '',
    nodeOperator6: '',
    nodeOperator7: '',
    nodeOperator8: '',

    processingTime: '',
    processingTime1: '',
    processingTime2: '',
    processingTime3: '',
    processingTime4: '',
    processingTime5: '',
    processingTime6: '',
    processingTime7: '',
    processingTime8: '',

    numberDays: '',
    numberDays1: '',
    numberDays2: '',
    numberDays3: '',
    numberDays4: '',
    numberDays5: '',
    numberDays6: '',
    numberDays7: '',
    numberDays8: '',


})
const onSubmit = () => {
    form.nodeOperator = 1 + ':' + form.nodeOperator1 + ';' + 2 + ':' + form.nodeOperator2 + ';' + 3 + ':' + form.nodeOperator3 + ';' + 4 + ':' + form.nodeOperator4 + ';' + 5 + ':' + form.nodeOperator5 + ';' + 6 + ':' + form.nodeOperator6 + ';' + 7 + ':' + form.nodeOperator7 + ';' + 8 + ':' + form.nodeOperator8
    form.processingTime = 1 + ':' + form.processingTime1 + ';' + 2 + ':' + form.processingTime2 + ';' + 3 + ':' + form.processingTime3 + ';' + 4 + ':' + form.processingTime4 + ';' + 5 + ':' + form.processingTime5 + ';' + 6 + ':' + form.processingTime6 + ';' + 7 + ':' + form.processingTime7 + ';' + 8 + ':' + form.processingTime8
    form.numberDays = 1 + ':' + form.numberDays1 + ';' + 2 + ':' + form.numberDays2 + ';' + 3 + ':' + form.numberDays3 + ';' + 4 + ':' + form.numberDays4 + ';' + 5 + ':' + form.numberDays5 + ';' + 6 + ':' + form.numberDays6 + ';' + 7 + ':' + form.numberDays7 + ';' + 8 + ':' + form.numberDays8
    form.nodeName = form.nodeNameObj.value1 + ';' + form.nodeNameObj.value2 + ';' + form.nodeNameObj.value3 + ';' + form.nodeNameObj.value4 + ';' + form.nodeNameObj.value5 + ';' + form.nodeNameObj.value6 + ';' + form.nodeNameObj.value7 + ';' + form.nodeNameObj.value8
    form.nodeType = form.nodeTypeObj.value1 + ';' + form.nodeTypeObj.value2 + ';' + form.nodeTypeObj.value3 + ';' + form.nodeTypeObj.value4 + ';' + form.nodeTypeObj.value5 + ';' + form.nodeTypeObj.value6 + ';' + form.nodeTypeObj.value7 + ';' + form.nodeTypeObj.value8
    let nodeDtos = form;
  
    axios.post("http://47.95.178.186:8000/IncidentSetRout/api/FormManagement/CreateNode", { nodeDtos })
        .then(res => {
            if (res.data.code == 200) {
                router.go(0)
                dialogVisible.value = false
                ElMessage.success(res.data.msg)
            }
            else {
                // 处理新增失败情况
                ElMessage.error(res.data.msg)
            }
        })
}

onMounted(() => {
    //绑定时间
    fetchOptions()
})
</script>
